<template>
  <div class="login_box">
    <div class="login_logo"></div>
    <a-form 
      :model="formState" 
      class="login_form"
      name="basic"
      :label-col="{ span: 8 }" 
      :wrapper-col="{ span: 16 }" 
      autocomplete="off"
    >
      <h1 class="login_title">登录</h1>
      <a-form-item name="username" :rules="[{ required: true, message: '账号不能为空' }]">
        <a-input v-model:value="formState.username" placeholder="请输入账号"/>
      </a-form-item>

      <a-form-item name="password" :rules="[{ required: true, message: '密码不能为空' }]">
        <a-input-password v-model:value="formState.password" placeholder="请输入密码"/>
      </a-form-item>

      <!-- <a-form-item name="remember" :wrapper-col="{ offset: 6, span: 14 }">
        <a-checkbox v-model:checked="formState.remember" style="margin-right: 100px;">隐私协议</a-checkbox>
        <a style="margin-left: 160px;" href="javascript:;">忘记密码</a>
      </a-form-item> -->

      <a-form-item :wrapper-col="{ offset: 6, span: 12 }">
        <a-button @click="login" type="primary" html-type="submit" style="background-color: #047466;" block>登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/stores/user'
import Api from '@/api/login'
import { message } from 'ant-design-vue'

const router = useRouter()
const store = useUserStore()

const formState = ref({
  username: '',
  password: '',
  remember: false
})

const login = async () => {
  const res = await Api.login(formState.value)
  if (res.code !== 100) return  message.error(res.message)
  store.setUserInfo(res.data ? res.data : {})
  message.success(res.message)
  router.push('/fieldManage/surveyRecord')
}

</script>
<style lang="scss" scoped>
.login_box {
  width: 1000px;
  height: 500px;
  display: flex;
  background-color: #edfff2;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;

  .login_logo {
    width: 50%;
    background: url('../../../public/image/login_logo.png') no-repeat center center;
  }

  .login_form {
    flex: 1;
    padding: 80px 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    text-align: center;
    
    .login_title {
      margin-bottom: 40px;
    }

    .ant-form-item {

      margin-bottom: 30px;

      .ant-form-item-explain-error {
        margin-left: 100px;
      }
      
      .ant-input, .ant-input-password {
        width: 280px;
        margin-left: 100px;
      }
    }
  }
}
</style>